Práctica: UI y Animación
Práctica: UI y Animación
Vamos a crear una Interfaz de Usuario (UI) interactiva tipo página web. Para que el menú de botones no se mueva accidentalmente al editar, debemos construirlo en el "backend" del software.
Abre una presentación nueva. Ve a la pestaña superior Vista > Patrón de diapositivas. Ahora estás en las tripas del documento.
En el panel izquierdo, haz scroll hacia arriba y selecciona la Diapositiva Número 1 (la más grande). Todo lo que diseñes aquí aparecerá en el resto de las diapositivas secundarias de forma inalterable.
Diseña tu "Header" como si fuera una página web real.
En esta diapositiva Maestra, inserta un rectángulo en la parte superior a modo de barra de navegación. Coloca tu logotipo a la izquierda, y a la derecha dibuja 3 Formas que servirán como botones "Inicio", "Productos", "Comprar".
Vuelve a la pestaña superior Patrón de diapositivas y haz clic en el botón con la cruz roja Cerrar vista Patrón.
Ahora la barra superior está protegida en el fondo, lista para funcionar como nuestra UI permanente.
En una web moderna la información aparece fluidamente sin esperar que el usuario haga clics adicionales. Usaremos la animación para revelar las características como complemento de la transición.
En tu lienzo normal, inserta una foto grande de tu producto y tres cuadros de texto alrededor señalando sus características.
Selecciona el primer cuadro de texto. Ve a Animaciones y elige Desvanecer.
Abre el Panel de animación. En las opciones de intervalo de tu animación, cambia el inicio a Después de la anterior.
Repite esto con los otros cuadros, agregando un Retraso de 0.25 segundos a cada uno. Esto creará un efecto en cascada automático y elegante al cargar la página.
INTERPOLACIÓN AUTOMÁTICA
Simularemos el desplazamiento "Scroll" de una página web moderna con el efecto Morph.
En el panel de miniaturas de la izquierda, selecciona tu diapositiva actual y presiona Ctrl + D para Duplicarla.
En la segunda diapositiva, mueve la imagen de tu producto hacia otro lado y hazla más grande. Borra los textos antiguos y pon unos nuevos (manteniendo sus animaciones automáticas).
Ve a la pestaña Transiciones y aplica Transformación (Morph). El software calculará la ruta y moverá el producto fluidamente de una posición a otra.
Vamos a darle vida a los botones que creamos en el backend para que el usuario pueda navegar de forma no lineal.
Vuelve a Vista > Patrón de diapositivas. Haz clic en la Diapositiva 1 del panel izquierdo para editar tus botones de navegación.
Selecciona la forma que dice "Laptops". Presiona Ctrl + K (Insertar Vínculo). Aparecerá una ventana; en el menú izquierdo selecciona Lugar de este documento. Elige la diapositiva que corresponde a ese producto y acepta. Repite con los demás botones para tejer tu red de enlaces.
Si presentamos ahora, cualquier clic en el fondo avanzará a la siguiente diapositiva arruinando la ilusión de una web. Vamos a cerrarlo.
Sal del Patrón de diapositivas. En la vista normal, ve a la pestaña superior Presentación con diapositivas y haz clic en Configuración de la presentación.
En la ventana que se abre, bajo el apartado "Tipo de presentación", selecciona Examinada en exposición (pantalla completa).
Al aceptar, la presentación se "bloquea". Solo se podrá navegar haciendo clic en los botones (hipervínculos) que diseñaste, creando una experiencia interactiva en bucle real.
Diseña una interfaz interactiva de un catálogo de productos universales (zapatos, tecnología o muebles). Crea un menú superior, 3 secciones interconectadas y usa Morph y animaciones fluidas para navegar entre ellas.
REFERENCIA 1
REFERENCIA 2
